import { defineStore } from 'pinia';
import { colorThemes } from '@/theme';
import type { ThemeConfig } from '@/theme';

export const useThemeStore = defineStore(
  'theme',
  // Setup Store 写法，Vue3 推荐用这个种方法写
  () => {
    const currentLang = ref<'zh-CN' | 'en-US'>('zh-CN');

    const themeVars = ref<ThemeConfig>();
    const theme = ref<'light' | 'dark'>('light');
    // 是否跟随系统
    const followSystem = ref(false);
    // 获取主题状态
    const getTheme = computed(() => {
      return theme.value;
    });

    /**
     * 设置主题颜色
     */
    const setThemeColor = (color: string) => {
      themeVars.value.primary = color;
    };

    /**
     * 获取主题颜色 用于组件中使用
     */
    const colors = computed(() => {
      const { primary, success, warning, danger, secondary, purple, yellow, blue, info } = themeVars.value;

      return {
        primary,
        success,
        warning,
        danger,
        secondary,
        purple,
        yellow,
        blue,
        info,
        ...colorThemes[theme.value]
      };
    });

    const setLang = () => {
      currentLang.value = currentLang.value === 'zh-CN' ? 'en-US' : 'zh-CN';
    };

    return {
      getTheme,
      theme,
      themeVars,
      setThemeColor,
      followSystem,
      currentLang,
      setLang,
      colors
    };
  },
  {
    persist: true // 是否持久化
  }
);
